<template>
  <el-calendar v-model="curDate">
    <template
      #dateCell="{ date }"
    >
      <!-- {{ data.day.substring(8) }} -->
      <!-- {{ data.day.split('-').pop() }} -->
      {{ new Date(date).getDate() }}
      <span class="rest">{{ isWeekend(date) ? '休' : '' }}</span>
      <!-- {{ test(date, data) }} -->
    </template>
  </el-calendar>
</template>

<script>
export default {
  name: 'Calendar',
  data() {
    return {
      curDate: new Date()
    }
  },
  methods: {
    isWeekend(date) {
      const day = new Date(date).getDay()
      return day === 0 || day === 6
    }
    // test(date, data) {
    //   console.log(date, data)
    // }
  }
}
</script>

<style>
.rest {
  background-color: orange;
  color: white;
  border-radius: 50%;
  font-size: 8px;
}
</style>
